<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<ui:composition template="/WEB-INF/qTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                >
    <ui:define name="title">Registration Page</ui:define>

    <ui:define name="content">
        <div id="main">
            <div id="indexRightColumn" style="width: 1200px;">
                <form id="registrationForm" name="registrationForm" action="register" method="post" >
                   
                    <table style="padding-top: 70px; padding-left: 400px;text-align: right;">
                        <tr>
                            <td><label>First Name: </label></td>
                            <td><input type="text" name="firstName" /> </td>
                        </tr>
                        <tr>
                          <td><label>Last Name: </label></td>
                            <td><input type="text" name="lastName" /></td>
                        </tr>
                        <tr>
                            <td><label>E-Mail: </label> </td>
                            <td> <input type="email" name="email" /></td>
                        </tr>
                        <tr>
                            <td>  <label>Username: </label></td>
                            <td> <input type="text" name="username" /> </td>
                        </tr>
                        <tr>
                            <td><label>Password: </label> </td>
                                  <td><input  type="password"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}"
                                        id="password" name="password" maxlength="16"
                                        onchange="  this.setCustomValidity(this.validity.patternMismatch ?
                            'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');
                    if (this.checkValidity())
                        form.confirmPassword.pattern = this.value;"/>  </td>
                        </tr>
                        <tr>
                            <td><label>Confirm Password: </label></td>
                            <td><input  type="password" id="confirmPassword" 
                                        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" 
                                        name="confirmPassword" maxlength="16"
                                        onchange="this.setCustomValidity(this.validity.patternMismatch ?
                            'Please enter the same Password as above' : '');"/>  </td>
                        </tr>
                        <tr>
                            <td style="text-align: right" colspan="2">
                                <input class="button" type="submit" value="Register" style="float: right;"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </ui:define>
</ui:composition>
